<template slot-scope="scope">
  <div class="device-list">
    <div class="device-list-tab">
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        :header-cell-style="{
          background: '#ffffff',
          textAlign: 'center',
          color: '#101010',
          padding: '3px',
          fontSize: '15px',
          fontWeight: '900',
        }"
        :row-style="{ height: '35px' }"
      >
        <el-table-column label="企业名称" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <span
              style="color: #bd3124"
              @click="handleEdit(scope.$index, scope.row)"
              >删除</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <deleDi
      :dialogVisible="dialogVisible"
      @handleClose="handleClose"
      @handleUnderstand="handleUnderstand"
    ></deleDi>
  </div>
</template>

<script>
import deleDi from "./deleDi.vue";
export default {
  props: {
    tableData: {},
    select: {},
  },
  components: {deleDi},
  data() {
    return {
      dialogVisible: false,
    };
  },
  computed: {},
  created() {},
  methods: {
    // 点击删除按钮
    handleEdit(index, row) {
      this.dialogVisible = true;
    },
    // 关闭删除弹窗
    handleClose(){
        this.dialogVisible = !this.dialogVisible
    },
    // 确认
    handleUnderstand(){
        this.dialogVisible = !this.dialogVisible
    },

    //表格颜色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      } else if (rowIndex % 2 == 1) {
        return "success-row";
      }
      return "success-row";
    },
  },
};
</script>

<style scoped lang="less">

.table-p {
  display: inline-block;
  width: 80px;
  height: 26px;
  border-radius: 5px;
  background-color: #3894ff;
  text-align: center;
  color: #ffffff;
  line-height: 26px;
}
// .table-p:nth-child(2) {
//   background-color: #3894ff;
//   margin-left: 10px;
// }
/deep/th {
  border-bottom: 1px solid gray !important;
  max-height: 35px !important;
}
/deep/ td {
  border-bottom: 1px solid gray !important;
  max-height: 35px !important;
}
.device-list-tab {
  width: 100%;
  border: 1px solid gray;
}
.device-list {
  width: 100%;
}
/deep/.el-table__empty-block,
/deep/.el-table tr,
/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
  // background-color: #135b7a;
  height: 46px;
  color: #101010;
  font-weight: 600;
}
/deep/.el-table .warning-row td {
  background: #e9f3ff !important;
  height: 35px;
  // color: #fff;
  font-weight: 600;
}

::v-deep .el-table .warning-row td {
  background: #e9f3ff !important;
}
</style>
